<template>
  <div class="container">
    <iframe
      :src="src "
      width="100%" height="100%" id="frame1" >
    </iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      exploded: false,
      imageList: [
        'https://image.dahuangf.com/dahuangf/image/2023/10/19/1420376530cab5a1310--jiancha_01.jpg',
        'https://image.dahuangf.com/dahuangf/image/2023/10/19/1420376530cab5b3e68--jiancha_02.jpg',
        'https://image.dahuangf.com/dahuangf/image/2023/10/19/1420376530cab5c42ec--jiancha_03.jpg',
        'https://image.dahuangf.com/dahuangf/image/2023/10/19/1420376530cab5d3458--jiancha_04.jpg',
        'https://image.dahuangf.com/dahuangf/image/2023/10/19/1420376530cab5e6562--jiancha_05.jpg',
        'https://image.dahuangf.com/dahuangf/image/2023/10/19/1420386530cab60294c--jiancha_06.jpg',
      ],
      src: ''
    };
  },
  mounted () {
    this.src = 'http://10.132.78.49:9999/sz-shj-web/index.html?code=eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjUyNWNiYzhiLThkODgtNGJjNS05YTdhLWVmNmE4Y2E1MzY1NyJ9.f4LlF7uPvT4q_I0ViTEoY5HS5x0s4GAb5SA_xlRu5kqbEYGA_XNhg8knhATIF80IJ9mqRTGhh6WtWgBbQpNXuQ'
    console.log('123this.src', this.src);
  },
  methods: {
    toggleZoom() {
      this.exploded = !this.exploded;
    },
    getImagePosition(index) {
      if (this.exploded) {
        const angle = (360 / this.imageList.length) * index;
        const radius = 150;
        const x = radius * Math.cos((angle * Math.PI) / 180);
        const y = radius * Math.sin((angle * Math.PI) / 180);
        return {
          transform: `translate(${x}px, ${y}px)`,
        };
      }
      return {};
    },
  },
};
</script>

<style scoped>
.container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  cursor: pointer;
}

.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transform-origin: center;
  transform: scale(1);
  transition: transform 0.5s ease;
}

.image-item {
  margin: 10px;
  transition: transform 0.5s ease;
  position: absolute;
}

.responsive-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.exploded .image-container {
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
}

.exploded .image-item {
  transition: transform 0.5s ease;
}
</style>
